<template>
  <el-container>
    <el-header style="background-color: #67C23A;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <h1>疫苗预约系统</h1>
    </el-header>
    <el-page-header @back="goBack"></el-page-header>
    <el-main class="login-contain" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <h2 >注册</h2>
      <el-form style="margin-right: 30px" :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
        <el-form-item
            label="姓名"
            prop="name">
          <el-input v-model.number="numberValidateForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="身份证"
            prop="account"
            :rules="[{ required: true, message: '身份证不能为空'}]"
        >
          <el-input v-model.number="numberValidateForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="手机号"
            prop="password"
            :rules="[
      { required: true, message: '手机号不能为空'}
    ]"
        >
          <el-input v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="numberValidateForm.gender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="注射地区">
          <div class="chooseProvince">
            <el-select style="margin-left: 10px" v-model="numberValidateForm.province" placeholder="请选择省份">
              <el-option
                  v-for="value in provinceList"
                  :label="value.regionName"
                  :value="value.regionName"></el-option>
            </el-select>
            <el-select style="margin-left: 10px" v-model="numberValidateForm.city" placeholder="请选择市区">
              <el-option
                  v-for="value in cityList"
                  :label="value.regionName"
                  :value="value.regionName"></el-option>
            </el-select>
            <el-select style="margin-left: 10px" v-model="numberValidateForm.region" placeholder="请选择县/镇">
              <el-option
                  v-for="value in regionList"
                  :label="value.regionName"
                  :value="value.regionName"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;flex-direction: row;justify-content: space-between">
            <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      numberValidateForm: {
        name: '',
        account: '',
        password: '',
        province: '',
        city: '',
        region: '',
        gender: ''
      },
      provinceList: null,
      cityList: null,
      regionList: null
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            url: 'http://localhost:88/api/user/users/register',
            method: 'post',
            data: {
              name: this.numberValidateForm.name,
              account: this.numberValidateForm.account,
              password: this.numberValidateForm.password,
              province: this.numberValidateForm.province,
              city: this.numberValidateForm.city,
              region: this.numberValidateForm.region,
              gender: this.numberValidateForm.gender === '1' ? '男':'女'
            }
          }).then(res => {
            console.log(res)
            if (res.data.data === '201'){
              this.$message.error('您的身份证已被注册!');
            }
            if (res.data.data === '200'){
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.$router.replace({path:'/userlogin'})
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goBack() {
      this.$router.replace({path:'/userlogin'})
    }
  },
  watch: {
    "numberValidateForm.province"(newValue, oldValue) {
      axios({
        url: 'http://localhost:88/api/stock/vaccineStock/getCity',
        method: 'get',
        params: {
          newValue: newValue
        }
      }).then(res => {
        this.cityList = res.data.data
      })
    },
    "numberValidateForm.city"(newValue, oldValue) {
      axios({
        url: 'http://localhost:88/api/stock/vaccineStock/getRegion',
        method: 'get',
        params: {
          newValue: newValue
        }
      }).then(res => {
        this.regionList = res.data.data
      })
    },
  },
  mounted() {
    axios({
      url: 'http://localhost:88/api/stock/vaccineStock/getProvince',
      method: 'get',
    }).then(res => {
      this.provinceList = res.data.data
    })
  }
}
</script>

<style scoped>
.login-contain{
  margin-top: 20px;
}
</style>
